<!--  -->
<template>
  <div class="content">
    <p class="tip">为保证账号安全，需要验证已绑定手机</p>
    <div class="inner">
      <div class="line underline layout-flex-base">
        <span class="lable">登录账号</span>
        {{ phoneHandle('15013454512')}}
      </div>
      <div class="line underline layout-flex-base">
        <span class="lable">新的密码</span>
        <u-input placeholder="请输入新的密码" type="text"></u-input>
      </div>
      <div class="line underline layout-flex-base">
        <span class="lable">确认密码</span>
        <u-input placeholder="请再次输入新的密码" type="text"></u-input>
      </div>
      <div class="line underline layout-flex-base">
        <span class="lable">验证码</span>
        <u-input placeholder="请输入验证码" type="text"></u-input>
        <c-button height="70rpx" width="190rpx">获取验证码</c-button>
        <!-- <span class="code">获取验证码</span> -->
      </div>
    </div>
    <div class="btn">
      <c-button height="86rpx" :fontSize="30" style="border-radius:20rpx">提交</c-button>
    </div>
  </div>
</template>

<script>
import mixin from '@/mixin'
export default {
  mixins: [mixin],
  data () {
    return {

    };
  },

  components: {},

  computed: {},

  methods: {}
}

</script>
<style lang='scss' >
page {
  background: $page-bg;
}
</style>
<style lang='scss' scoped>
.content {
  // padding: 30rpx;
  .tip {
    padding: 20rpx;
  }
  .inner {
    padding: 0 30rpx;
    background: #fff;
    .line {
      padding: 15rpx 5rpx 20rpx;
      font-size: 30rpx;
      color: #000;
      .lable {
        margin-right: 20rpx;
        min-width: 120rpx;
      }
      .code {
        padding: 6px 15rpx;
        color: #fff;
        font-size: 28rpx;
        background: $theme-color;
        border-radius: 40rpx;
        line-height: 1;
      }
    }
  }
  .btn {
    padding: 40rpx 110rpx;
  }
}
</style>